<template>
  <div class="wrapper">
    <el-form>
      <el-form-item class="easy-table">
        <el-table :data="floorManageList"
          style="width: 100%"
          max-height="600">
          <el-table-column prop="floor"
            label="楼层"
            min-width="50">
          </el-table-column>
          <el-table-column prop="phont"
            label="楼层管理电话"
            min-width="50">
          </el-table-column>
          <el-table-column prop="foreman"
            label="领班"
            min-width="100">
          </el-table-column>
          <el-table-column label="楼层服务员"
            min-width="280">
            <template slot-scope="scope">
              <el-popover trigger="hover"
                placement="top">
                <p style="min-width:300px; max-width:400px">
                  <el-tag :key="index"
                    class="tag"
                    disable-transitions
                    v-for="(tag,index) in scope.row.member ? scope.row.member.split(',') : []">
                    {{tag}}
                  </el-tag>
                </p>
                <div slot="reference"
                  class="name-wrapper">
                  <el-tag size="medium"
                    disable-transitions
                    style="white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;">{{ scope.row.member }}</el-tag>
                </div>
              </el-popover>
            </template>

          </el-table-column>
          <el-table-column fixed="right"
            label="操作"
            width="200">
            <template slot-scope="scope">
              <el-button type="text"
                size="small"
                @click="edit(scope.row)"
                v-has="'dispatchredact'">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <!-- 编辑弹窗 -->
    <el-dialog title="编辑"
      :visible.sync="dialogVisible"
      width="600px"
      class="editDialog">
      <el-form label-width="120px"
        style="width:90%;">
        <el-form-item label="楼层：">
          <span>{{editFormData.floor}}</span>
        </el-form-item>
        <el-form-item label="楼层管理电话：">
          <el-input v-model="editFormData.phont"></el-input>
        </el-form-item>
        <el-form-item label="领班：">
          <el-tag :key="tag"
            class="tag"
            disable-transitions
            v-for="tag in editFormData.foreman ? editFormData.foreman.split(',') : []">
            {{tag}}
          </el-tag>
          <el-button class="button-new-tag"
            size="small"
            @click="selectOpen(1)">+ 领班</el-button>
        </el-form-item>
        <el-form-item label="楼层服务员：">
          <el-tag :key="tag"
            class="tag"
            disable-transitions
            v-for="tag in editFormData.member ? editFormData.member.split(',') : []">
            {{tag}}
          </el-tag>
          <el-button class="button-new-tag"
            size="small"
            @click="selectOpen(2)">+ 楼层服务员</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="_sure">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 人员选择 -->
    <el-dialog :visible.sync="dialogVisibleSelect"
      width="600px"
      :title="title"
      class="selectDiaglog">
      <div class="content">
        <ul v-for="item in selectMemberData"
          :key="item.deptId">
          <li>
            <p class="title">{{item.deptName}}</p>
            <ul class="clearfix member-list">
              <li v-for="i in item.memberList"
                :key="i.userId"
                class="fl">
                <el-checkbox :label="i.name"
                  v-model="i.check"></el-checkbox>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisibleSelect = false">取 消</el-button>
        <el-button type="primary"
          @click="_sureMember">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getDispatchList,
  getDispatchMemberList,
  setDispatchRedact
} from "@/public/js/setting";
export default {
  components: {},
  props: {},
  data() {
    return {
      floorManageList: [],
      dialogVisible: false,
      dialogVisibleSelect: false,
      editFormData: "",
      title: "领班选择",
      foremanList: [],
      memberList: [],
      selectMemberData: [],
      floorId: "",
      showMemberList: "",
      type: 1,
      foremans: [],
      members: [],
      phontId: "",
      numId: ""
    };
  },
  watch: {},
  computed: {},
  methods: {
    //获取楼层管理列表
    _getDispatchList() {
      getDispatchList().then(res => {
        this.floorManageList = res.data.floorManageList;
      });
    },
    // 编辑
    edit(data) {
      this.editFormData = JSON.parse(JSON.stringify(data));
      this.floorId = this.editFormData.floorId;
      this.numId = this.editFormData.numId;
      this.phontId = this.editFormData.phontId;
      this.dialogVisible = true;
      this._getDispatchMemberList(1);
      this._getDispatchMemberList(2);
    },
    // 获取人员列表
    _getDispatchMemberList(type) {
      getDispatchMemberList({
        foreman: type,
        floorId: this.floorId
      }).then(res => {
        if (type == 1) {
          this.foremanList = res.data.floorDepts;
          this.foremanList.forEach(item => {
            item.memberList.forEach(i => {
              this.foremans.push({
                userId: i.userId,
                name: i.name,
                check: i.check
              });
            });
          });
        } else {
          this.memberList = res.data.floorDepts;
          this.memberList.forEach(item => {
            item.memberList.forEach(i => {
              this.members.push({
                userId: i.userId,
                name: i.name,
                check: i.check
              });
            });
          });
        }
      });
    },
    _sureMember() {
      let arr = [];
      let foremans = [];
      let members = [];
      this.selectMemberData.forEach(item => {
        item.memberList.forEach(i => {
          if (i.check) {
            arr.push(i.name);
          }
          if (this.type == 1) {
            foremans.push({
              userId: i.userId,
              name: i.name,
              check: i.check
            });
          } else {
            members.push({
              userId: i.userId,
              name: i.name,
              check: i.check
            });
          }
        });
      });
      if (this.type == 1) {
        this.editFormData.foreman = arr.join(",");
        this.foremans = foremans;
      } else {
        this.editFormData.member = arr.join(",");
        this.members = members;
      }
      this.dialogVisibleSelect = false;
    },
    // 选择人员
    selectOpen(type) {
      this.type = type;
      this.selectMemberData = [];
      this.title = type == 1 ? "领班人员选择" : "楼层服务人员选择";
      this.selectMemberData = type == 1 ? this.foremanList : this.memberList;
      this.dialogVisibleSelect = true;
    },
    // 编辑保存
    _sure() {
      const regTel = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (this.editFormData.phont && !regTel.test(this.editFormData.phont)) {
        this.$message.error("请您输入11位正确的手机号");
        return false;
      }

      setDispatchRedact({
        numId: this.numId,
        floorId: this.floorId,
        phontId: this.phontId,
        phont: this.editFormData.phont,
        foremans: this.foremans,
        members: this.members
      }).then(res => {
        if (!res.data.errCode) {
          this.$message({
            type: "success",
            message: "操作成功"
          });
          this.dialogVisible = false;
          this._getDispatchList();
          this.foremans = [];
          this.members = [];
        }
      });
    }
  },
  created() {
    this._getDispatchList();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.wrapper {
  .editDialog {
  }
  .content {
    & > ul {
      .title {
        padding: 15px;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
  .member-list {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    & > li {
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
  .tag {
    margin-right: 10px;
  }
}
</style>